<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/res/layui/css/layui.css" media="all">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <script src="/res/layui/layui.js"></script>
    <script src="/res/vue.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <link rel="stylesheet" href="/res/pace/pace.min.css" media="all">
    <script src="/res/pace/pace.min.js"></script>
    <style>
        .pace {
            background-color: #009688;
        }
        #app{
            margin-top: 15px;
        }
    </style>
    <script>
        function go(url) {
            layui.use('layer',function () {
                var layer=layui.layer;
                layer.load(2);
                location.href = url;
            })

        }
    </script>
</head>
<body>
<div class="layui-fluid" id="app">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12" style="min-width: 100%;width: auto;">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">粉丝聊天</li>
                        </ul>
                        <div class="layui-tab-content" style="padding-left: 0px;padding-right: 0px">

                            <div class="layui-tab-item layui-show">

                                <div class="layadmin-trailer ">

                                    <table class="layui-table" lay-skin="line">

                                        <thead>
                                        <tr>
                                            <th></th>
                                            <th>#ID</th>
                                            <th>粉丝</th>
                                            <th>机器人</th>
                                            <th>时间</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(item,index) in items" :data_id="item.uid">
                                            <td style="width: 20px;text-align: center">
                                                <input type="checkbox" class="vue_index" name="id" :value="id" style="zoom: 150%">
                                            </td>
                                            <td>{{item.userinfo}}</td>
                                            <td>{{item.keyword}}</td>
                                            <td>{{item.reply}}</td>
                                            <td>{{item.create_time}}</td>
                                        </tr>

                                        </tbody>
                                    </table>


                                </div>
                                <div id="demo7"></div>

                            </div>


                        </div>
                    </div>


                </div>


            </div>

        </div>


    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            check: [],
            curr: 1,//当前页
            limit: 10,//当前页
            items: []
        }
    });

    function init() {
        layer.ready(function () {
            layer.load(2);
            $.get('/admin/sunfc.users/chat', {page: app.curr, limit: app.limit},
                function (res) {
                    layer.closeAll();
                    app.items = res.data;
                }
            );
        });

    }

    layui.use('table', function () {
        var table = layui.table;
    });
    layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage
            , layer = layui.layer;
        //完整功能
        laypage.render({
            elem: 'demo7'
            , count: "{$count}"
            , limits: [10, 20]
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
            , jump: function (obj) {
                console.log(obj)
                app.curr = obj.curr;
                app.limit = obj.limit;
                init();

            }
        });
    });

    //获取下标
    function getCheckBox() {
        var check = [];
        $.each($('input[type=checkbox]:checked.vue_index'), function () {
            check.push($(this).val());
        });
        return check;
    };

</script>
</body>
</html>